<template>
  <div id = 'OrderGantt' style="height: 100%">
    <el-menu
      :default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      default-active="3"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="0" class="menu_item" @click="toHomePage" style="width: 100px">
        <i class="el-icon-s-home" style="font-size: 50px; margin-right: 25px"></i>
      </el-menu-item>
      <el-menu-item index="1" class="menu_item" @click="toOrderGantt">订单甘特图</el-menu-item>
      <el-menu-item index="2" class="menu_item" @click="toResourceGantt">资源甘特图</el-menu-item>
      <el-menu-item index="3" class="menu_item" @click="toResourceLoad">资源负载图</el-menu-item>
      <el-menu-item index="4" class="menu_item">
        <a href="http://localhost/#/index">新系统</a>
      </el-menu-item>
      <div align="right" style="padding-right: 60px; margin-top: 10px">
        <el-input
          placeholder="请输入搜索内容"
          style="width: 300px"
          :disabled=inputDisable
          v-model="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="trick" :disabled=inputDisable></el-button>
        </el-input>
      </div>
    </el-menu>
    <el-row><div class="title">资源负载图</div></el-row>
    <el-row>
      <el-col :span="12" style="height: 100%">
        <div align="center" style="padding-right: 40px">
          <el-col :span="8" :offset="8">
            <el-row>
              <el-progress
                type="circle"
                :percentage="devicePercentage"
                :color="deviceColor"
                :stroke-width="20"
                :width="150"
                style="display: inline-block"
                class="progress"></el-progress>
            </el-row>
            <el-row>
              <div>设备总负载</div>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-progress
                type="circle"
                :percentage="staffPercentage"
                :color="staffColor"
                :stroke-width="20"
                :width="150"
                style="display: inline-block"
                class="progress"></el-progress>
            </el-row>
            <el-row>
              <div>人员总负载</div>
            </el-row>
          </el-col>
        </div>
      </el-col>
      <el-col :span="12" style="">
        <el-row style="margin-top: 20px; font-size: 40px">当前周次 : {{curWeek}}</el-row>
        <el-row style="padding-top: 20px">
          <el-select v-model="selectedWeek" placeholder="请选择周次">
            <el-option
              v-for="item in weeks"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" @click="search">查询</el-button>
          <el-select v-model="selectedMode" @change="selectResourceLoadDetails" style="width: 150px; padding-left: 100px" placeholder="请选择">
            <el-option
              v-for="item in modes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-row>
      </el-col>
    </el-row>
    <br>

    <el-row
      style="height: 80px">
      <el-col :span="3">
        <el-col :span="4" style="display: inline-block"><div>&nbsp</div></el-col>
        <el-col :span="20" style="display: inline-block; border-style: solid">
          <el-row style="line-height: 25px; font-weight: bold">
            <el-col :span="12" :style="{backgroundColor: colors[0], fontSize: '10px'}" align="center">
              <div style="height: 25px">0~20%</div>
            </el-col>
            <el-col :span="12" :style="{backgroundColor: colors[1], fontSize: '10px'}" align="center">
              <div style="height: 25px">20~40%</div>
            </el-col>
          </el-row>
          <el-row style="line-height: 25px; font-weight: bold">
            <el-col :span="12" :style="{backgroundColor: colors[2], fontSize: '10px'}" align="center">
              <div style="height: 25px">40~60%</div>
            </el-col>
            <el-col :span="12" :style="{backgroundColor: colors[3], fontSize: '10px'}" align="center">
              <div style="height: 25px">60~80%</div>
            </el-col>
          </el-row>
          <el-row style="line-height: 25px; font-weight: bold">
            <el-col :span="12" :style="{backgroundColor: colors[4], fontSize: '10px'}" align="center">
              <div style="height: 25px">80~100%</div>
            </el-col>
            <el-col :span="12" :style="{backgroundColor: colors[5], fontSize: '10px'}" align="center">
              <div style="height: 25px">>100%</div>
            </el-col>
          </el-row>
        </el-col>
        <el-row style="height: 50%"></el-row>
      </el-col>
      <el-col :span="1" style="font-size: 30px;font-weight: bold; line-height: 80px" align="center" >
        <div @mouseover="inLeft" @mouseout="outLeft" @click="pre">
          <i class="el-icon-caret-left"></i>
        </div>
      </el-col>
      <el-col :span="18" style="font-size: 20px; line-height: 80px">
        <el-col :span="3" v-for="day in days" align="center" style="border-style: solid">
          {{day}}
        </el-col>
      </el-col>
      <el-col :span="1" style="font-size: 30px;font-weight: bold; line-height: 80px" align="center">
        <div @mouseover="inRight" @mouseout="outRight"  @click="post">
          <i class="el-icon-caret-right"></i>
        </div>
      </el-col>
    </el-row>
    <br>
    <el-row v-for="resource in shownResources" style="height: 75px">
      <el-col :span="24">
      <el-row style="padding-bottom: 10px">
        <el-col :span="2" style="height: 100%" :offset="1">
          <div style="line-height: 75px; border-style: solid; font-size: 10px" align="center">
            {{resource.resourceName}}
          </div>
        </el-col>
        <el-col :span="18" style="height: 100%; padding: 0" :offset="1" align="left">
          <el-row style="height: 75px">
            <el-col :span="3" v-for="load in resource.loadList">
              <div style="height: 100%; width: 100%; line-height: 100%; display: inline-block" align="center" class="ganttBlock">
                <div :style="{height: load.height, backgroundColor: load.color, lineHeight: load.height, marginLeft: '10px', marginRight: '10px'}" class="ganttBlock">
                  {{load.loadRatio}}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      </el-col>
<!--      <el-row style="height: 20px" class="ganttBlock"></el-row>-->
    </el-row>
  </div>
</template>

<script>
    import {getDeviceLoadRatioByDateInDay, getResourceLoadRatioByDateScope, getStaffLoadRatioByDateInDay} from "../api";

    export default {
        name: "ResourceLoad",
        data() {
            return {
                searchInput: '',
                inputDisable: false,
                devicePercentage: 0,
                deviceColor: '',
                staffPercentage: 0,
                staffColor: '',
                curWeek: 'Week1',
                selectedWeek: 'Week1',
                selectedMode: '0',
                modes: [{
                    value: '0',
                    label: '全部资源'
                }, {
                    value: '1',
                    label: '仅员工'
                }, {
                    value: '2',
                    label: '仅设备'
                }],
                weeks: [
                    {
                        value: 'Week1',
                        label: 'Week1'
                    },
                    {
                        value: 'Week2',
                        label: 'Week2'
                    },
                    {
                        value: 'Week3',
                        label: 'Week3'
                    },
                    {
                        value: 'Week4',
                        label: 'Week4'
                    },
                    {
                        value: 'Week5',
                        label: 'Week5'
                    },
                    {
                        value: 'Week6',
                        label: 'Week6'
                    },
                    // {
                    //     value: 'Week7',
                    //     label: 'Week7'
                    // },
                    // {
                    //     value: 'Week8',
                    //     label: 'Week8'
                    // },
                    // {
                    //     value: 'Week9',
                    //     label: 'Week9'
                    // },
                    // {
                    //     value: 'Week10',
                    //     label: 'Week10'
                    // }
                ],
                days: ['2018-10-14','2018-10-14','2018-10-14','2018-10-14','2018-10-14','2018-10-14','2018-10-14','2018-10-14'],
                selectedDate: '',
                allResources: [],
                shownResources: [],
                colors: [
                    '#00FF00',
                    '#00FFFF',
                    '#FFFF00',
                    '#FFA500',
                    '#FF00FF',
                    '#FF0000',
                ]
            };
        },
        methods: {
            trick() {
                this.$alert('恭喜你发现了一个彩蛋，这个按钮实际上没有任何作用！^_^', 'TRICK!!!', {
                    confirmButtonText: '我知道了'
                });
                this.searchInput = '';
                this.inputDisable = true;
            },
            toHomePage(){
                this.$router.push({path: '/'});
            },
            toOrderGantt(){
                this.$router.push({path: '/OrderGantt'});
            },
            toResourceGantt(){
                this.$router.push({path: '/ResourceGantt'});
            },
            toResourceLoad(){
                this.$router.push({path: '/ResourceLoad'});
            },

            inLeft(){
                document.getElementsByClassName("el-icon-caret-left")[0].style.color = "yellow";
            },

            outLeft(){
                document.getElementsByClassName("el-icon-caret-left")[0].style.color = "black";
            },

            inRight(){
                document.getElementsByClassName("el-icon-caret-right")[0].style.color = "yellow";
            },

            outRight(){
                document.getElementsByClassName("el-icon-caret-right")[0].style.color = "black";
            },

            pre(){
                var weekNum = parseInt(this.curWeek.substr(4)) - 1;
                if (weekNum < 1){
                    this.$notify.info({
                        title: '提示',
                        message: '无更早的数据！',
                        duration: 3000
                    });
                }
                else {
                    this.selectedWeek = 'Week' + weekNum.toString();
                    this.search();
                }
            },

            post(){
                var weekNum = parseInt(this.curWeek.substr(4)) + 1;
                alert(weekNum);
                if (weekNum > 6){
                    this.$notify.info({
                        title: '提示',
                        message: '无更近的数据！',
                        duration: 3000
                    });
                }
                else {
                    this.selectedWeek = 'Week' + weekNum.toString();
                    this.search();
                }
            },

            //选择日期并查询
            search() {
                if (this.selectedWeek !== ''){
                    this.getResourceLoadDetails();
                    this.selectedMode = '0';
                }
            },

            async getPercentage() {
                await getResourceLoadRatioByDateScope(this.days[0]).then(res =>{
                    this.devicePercentage = res.deviceLoadRatio;
                    this.staffPercentage = res.staffLoadRatio;
                });
                this.calculateProgressColor();
            },

            calculateProgressColor() {
                if (parseFloat(this.devicePercentage) > 80){
                    this.deviceColor = '#FF0000';
                }
                else if (parseFloat(this.devicePercentage) > 60){
                    this.deviceColor = '#FFA500';
                }
                else if (parseFloat(this.devicePercentage) > 40){
                    this.deviceColor = '#FFFF00';
                }
                else if (parseFloat(this.devicePercentage) > 20){
                    this.deviceColor = '#0000FF';
                }
                else {
                    this.deviceColor = '#00FF00';
                }

                if (this.staffPercentage > 80){
                    this.staffColor = '#FF0000';
                }
                else if (this.staffPercentage > 60){
                    this.staffColor = '#FFA500';
                }
                else if (this.staffPercentage > 40){
                    this.staffColor = '#FFFF00';
                }
                else if (this.staffPercentage > 20){
                    this.staffColor = '#0000FF';
                }
                else {
                    this.staffColor = '#00FF00';
                }
            },

            async getResourceLoadDetails() {
                this.calculateDays();

                this.allResources = [];
                for (let k = 0; k < this.days.length; k ++){
                    let d = this.days[k];
                    let i = 0;

                    await getDeviceLoadRatioByDateInDay(d).then(res =>{
                        for (let j = 0; j < res.length; j ++){
                            if (k === 0){
                                this.allResources[i] = {};
                            }
                            let r = res[j];
                            this.allResources[i].resourceName = r.resourceName;
                            this.allResources[i].type = '2';
                            let record = {
                                loadRatio: r.loadRatio + '%'
                            };
                            record.margin = (50 - 0.4 * parseFloat(r.loadRatio)).toString() + 'px';
                            record.height = (30 + 0.5 * parseFloat(r.loadRatio)).toString() + 'px';
                            if (parseFloat(r.loadRatio) <= 20){
                                record.color = this.colors[0];
                            }
                            else if (parseFloat(r.loadRatio) <= 40){
                                record.color = this.colors[1];
                            }
                            else if (parseFloat(r.loadRatio) <= 60){
                                record.color = this.colors[2];
                            }
                            else if (parseFloat(r.loadRatio) <= 80){
                                record.color = this.colors[3];
                            }
                            else  if (parseFloat(r.loadRatio) <= 100){
                                record.color = this.colors[4];
                            }
                            else {
                                record.color = this.colors[5];
                            }
                            if (this.allResources[i].loadList === undefined){
                                this.allResources[i].loadList = [];
                            }
                            this.allResources[i].loadList[this.allResources[i].loadList.length] = record;
                            i ++;
                        }
                    });

                    await getStaffLoadRatioByDateInDay(d).then(res =>{
                        for (let j = 0; j < res.length; j ++){
                            if (k === 0){
                                this.allResources[i] = {};
                            }
                            let r = res[j];
                            this.allResources[i].resourceName = r.resourceName;
                            this.allResources[i].type = '1';
                            let record = {
                                loadRatio: r.loadRatio + '%'
                            };
                            record.margin = (50 - 0.4 * parseFloat(r.loadRatio)).toString() + 'px';
                            record.height = (30 + 0.5 * parseFloat(r.loadRatio)).toString() + 'px';
                            if (parseFloat(r.loadRatio) <= 20){
                                record.color = this.colors[0];
                            }
                            else if (parseFloat(r.loadRatio) <= 40){
                                record.color = this.colors[1];
                            }
                            else if (parseFloat(r.loadRatio) <= 60){
                                record.color = this.colors[2];
                            }
                            else if (parseFloat(r.loadRatio) <= 80){
                                record.color = this.colors[3];
                            }
                            else  if (parseFloat(r.loadRatio) <= 100){
                                record.color = this.colors[4];
                            }
                            else {
                                record.color = this.colors[5];
                            }
                            if (this.allResources[i].loadList === undefined){
                                this.allResources[i].loadList = [];
                            }
                            this.allResources[i].loadList[this.allResources[i].loadList.length] = record;
                            i ++;
                        }
                    });
                }
                this.cleanResourceDetails();

                this.selectResourceLoadDetails();

                this.getPercentage();
            },

            calculateDays(){
                var regEx = new RegExp("\\-","gi");
                // var regEx = new RegExp("-","gi");
                let date = new Date(this.days[0].replace(regEx, "/"));
                var weekNum = parseInt(this.selectedWeek.substr(4)) - parseInt(this.curWeek.substr(4));
                this.curWeek = this.selectedWeek;
                this.selectedWeek = '';
                console.log(date);

                date.setDate(date.getDate() + 7 * weekNum);
                this.days = [];
                for (let i = 0; i < 8; i ++){
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    if (month < 10) month = '0' + month;
                    if (day < 10) day = '0' + day;
                    this.days[this.days.length] = year + '-' + month + '-' +day;
                    date.setDate(date.getDate() + 1);
                }
                console.log(this.days);
            },

            cleanResourceDetails(){
                let newResourceDetails = [];
                for (let i = 0; i < this.allResources.length; i ++){
                    let r  = this.allResources[i];
                    let dirtyResource = true;
                    for (let j = 0; j < r.loadList.length; j ++){
                        let lr = r.loadList[j].loadRatio;
                        if (lr !== '0%'){
                            dirtyResource = false;
                            break;
                        }
                    }
                    if (!dirtyResource){
                        newResourceDetails[newResourceDetails.length] = r
                    }
                }
                this.allResources = newResourceDetails;
            },

            selectResourceLoadDetails(){
                this.shownResources = [];
                if (this.selectedMode === '0'){
                    this.shownResources = this.allResources;
                }
                else {
                    for (let i = 0; i < this.allResources.length; i ++){
                        let r = this.allResources[i];
                        if (r.type === this.selectedMode){
                            this.shownResources[this.shownResources.length] = r;
                        }
                    }
                }
            }

        },
        mounted: function () {
            this.getResourceLoadDetails();
        }
    }
</script>

<style scoped>

  .menu_item {
    width: 150px;
    font-size: larger;
    text-align: center;
    font-weight: bold;
  }

  .title {
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
